<template>
  <div class="bgc2">
    <!-- 导航栏 -->
    <van-nav-bar title="个人中心">
      <template #right>
        <van-icon color="#fff" name="weapp-nav" size="18" />
      </template>
    </van-nav-bar>
    <!-- 用户信息导航栏 -->
    <div class="picture">
      <van-image fit="cover" round :src="$store.state.userinfo.photo" />
      <div class="userinfo">
        <h4>
          {{ $store.state.userinfo.name }}
          <van-icon name="diamond" color="#ffd260" size="18" />
        </h4>
        <span>{{ $store.state.userinfo.birthday }}</span>
        <div class="idx">ID: 265790</div>
      </div>
      <van-icon
        name="arrow"
        color="#000"
        size="24"
        @click="$router.push('/mine/edit')"
      />
    </div>
    <van-row>
      <van-col span="6">
        <p>520</p>
        <span style="color: #9e9999">直播</span>
      </van-col>
      <van-col span="6">
        <p>{{ $store.state.user.userList.length}}</p>
        <span style="color: #9e9999">关注</span>
      </van-col>
      <van-col span="6">
        <p>2000k</p>
        <span style="color: #9e9999">粉丝</span>
      </van-col>
      <van-col span="6">
        <p>999</p>
        <span style="color: #9e9999">私信</span>
      </van-col>
    </van-row>
    <!-- 分割线 -->
    <div class="online"></div>
    <!-- 快捷入口 -->
    <van-row>
      <van-col span="8" @click="$router.push('/mine/interest')">
        <van-icon name="newspaper-o" color="#8daaff" />
        <span>我的关注</span>
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" color="#ff3804" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon name="sign" color="#ffaf6d" />
        <span>阅读历史</span>
      </van-col>
    </van-row>

    <!-- cell布局 -->
    <div class="cell-box">
      <van-cell to="/mine/edit" title="编辑资料" is-link icon="edit" />
      <van-cell to="/mine/chat" title="小智同学" is-link icon="chat-o" />
      <van-cell title="系统设置" is-link icon="setting-o" />
      <van-cell title="隐私管理" is-link icon="eye-o" />
      <!-- 分割线 -->
      <div class="online"></div>
      <van-cell
        @click="$store.commit('loginout')"
        title="退出登录"
        is-link
        icon="info-o"
      />
    </div>

    <div class="mobel"></div>
  </div>
</template>

<script>
import { userFollowingsAPI } from '@/api/user'
export default {
  data() {
    return {
      list:[]
    }
  },
async created() {
    this.$store.dispatch('reqUserInfo')
     const res = await userFollowingsAPI({
        page: this.page
      })
      this.page++
      this.list.push(...res.data.results)
      this.$store.commit('user/GETFOLLOWLIST', this.list)
      if (this.list.length <= res.data.total_count) {
        return
      }
  }
}
</script>

<style lang="less" scoped>
@selfcolor: #fff;
.bgc2 {
  height: 200px;
  background-color: @selfcolor;
}
.picture {
  height: 130px;
  display: flex;
  align-items: center;
  .van-image {
    width: 90px;
    height: 90px;
    margin: 0 16px 0 26px;
  }
  .userinfo {
    flex: 1;
    h4 {
      color: #000;
      font-size: 18px;
      margin-bottom: 10px;
      margin-left: 2px;
    }
    span {
      border-radius: 20px;
      background-color: #000;
      color: @selfcolor;
      padding: 3px 5px;
    }
    .idx {
      color: #9e9999;
      margin-top: 16px;
      font-size: 8px;
    }
  }
  .van-icon {
    margin-right: 14px;
  }
}
.van-row {
  margin-top: 10px;
  .van-col {
    height: 55px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    p {
      font-size: 18px;
      font-weight: 700;
      color: #000;
    }
    .van-icon {
      font-size: 30px;
      margin-bottom: 5px;
    }
  }
}
.online {
  height: 10px;
  width: 100vw;
  background-color: #f4f4f4;
}
.cell-box {
  margin-top: 20px;
  .van-icon {
    color: #d0355d;
    ::v-deep.van-icon-arrow {
      color: #9e9999;
    }
  }
}
.mobel {
  height: 100px;
  width: 100vw;
  background-color: #f4f4f4;
}
</style>
